// 查看页面和编辑页面  公用的参数和方法
import common from '@/config';
import { config } from '@/option/config';
import container from '@/page/group/container';
import { getList } from '@/api/map';
import { basePrefix } from '@/config';
import { mapState, mapGetters } from 'vuex';
export default {
	components: {
		container
	},
	provide() {
		return {
			main: this,
			contain: this
		};
	},
	data() {
		return {
			area: {
				editorX: 0,
				editorY: 0,
				// 选中区域的起点
				start: {
					x: 0,
					y: 0
				},
				width: 0,
				height: 0,
				isShowArea: false
			},
			DIC: {
				MAP: []
			},
			contentWidth: '',
			config: config,
			obj: {},
			id: '',
			visual: {},
			nav: [],
			common: common,
			active: [],
			activeIndex: null,
			overactive: '',
			historyCache: [], // 历史操作数据用于undo redo
			currentHistoryIndex: -1, // redo undo 指针
			copyNav: '', // 用于监听去干扰,字符串类型,方便比较,
			configData: ['header', 'query']
		};
	},
	watch: {
		changeNavList: {
			handler(val, oldval) {
				let leftVals = val.map(v => parseInt(v.left)).toString();
				let leftOldVals = oldval.map(v => parseInt(v.left)).toString();
				let topVals = val.map(v => parseInt(v.top)).toString();
				let topOldVals = oldval.map(v => parseInt(v.top)).toString();
				let widthVals = val.map(v => parseInt(v.component.width)).toString();
				let widthOldVals = oldval.map(v => parseInt(v.component.width)).toString();
				let heightVals = val.map(v => parseInt(v.component.height)).toString();
				let heightOldVals = oldval.map(v => parseInt(v.component.height)).toString();
				if (leftVals != leftOldVals || topVals != topOldVals || widthVals != widthOldVals || heightVals != heightOldVals) {
					this.recordMain(val, oldval);
				} else {
					this.recordMain(val, oldval);
				}
			},
			deep: true
		},
		config: {
			handler(val) {
				this.configData.concat(['url']).forEach(ele => {
					window.$glob[ele] = val[ele];
				});
			},
			deep: true,
			immediate: true
		}
	},
	computed: {
		...mapState({
			activeComps: state => state.activeComps,
			compsList: state => state.compsList
		}),
		...mapGetters(['activeCompsIndex']),
		list() {
			let result = [];
			const detail = list => {
				list.forEach(item => {
					result.push(item);
					if (item.children) detail(item.children);
				});
			};
			detail(this.compsList);
			const len = result.length - 1;
			result.forEach((ele, index) => (ele.zIndex = len - index));
			return result;
		},
		// 能否撤销
		canUndo() {
			return this.currentHistoryIndex > 0;
		},
		canRedo() {
			return this.historyCache.length > this.currentHistoryIndex + 1;
		},
		changeNavList() {
			let nav = this.deepClone(this.compsList);
			return nav;
		}
	},
	created() {
		// this.initDic();
	},
	methods: {
		//初始化字典
		initDic() {
			getList({
				current: 1,
				size: 1000
			}).then(res => {
				const data = res.data.data;
				this.DIC.MAP = data.records.map(ele => {
					return {
						label: ele.name,
						value: basePrefix + '/map/data?id=' + ele.id
					};
				});
			});
		},
		findnav(id) {
			let result = {};
			const detail = (list, parent, parentIndex, deep) => {
				list.forEach((item, index) => {
					if (id === item.index) {
						result = {
							index: item.index,
							deep: deep,
							item: item,
							itemIndex: index,
							itemLen: list.length - 1,
							itemList: list,
							parent: parent,
							parentIndex: parentIndex
						};
					} else if (item.children) {
						detail(item.children, item, index, deep + 1);
					}
				});
			};
			detail(this.compsList, this.compsList, 0, 0);
			return result;
		},
		findlist(index) {
			return this.list.find(ele => ele.index == index) || {};
		},
		handleInitActive() {
			if (this.active.isNull()) return;
			this.active = [];
			this.activeIndex = null;
		},
		clearActiveAllComps() {
			// ？？？？？？？
			this.compsList.map(act => {
				let refIndex = `${this.common.DEAFNAME}${act.index}`;
				console.log('this.$refs[refIndex]', this.$refs[refIndex]);
				this.$refs[refIndex][0].setActive(false);
			});
		},
		handleMouseDown() {
			this.handleInitActive();
		},
		// 监听调用主程序
		recordMain(val, oldval) {
			//分两种情况:
			// 1. 版本在回撤时, 不要走监听(同时啥也没改)
			// 2. 版本回撤改了呢?那也要走监听重新推新的
			if (JSON.stringify(val) != this.copyNav) {
				// 这里监听不用deep,很多移动操作无法监听,但用了deep杂质很多,随便鼠标点一下就能触发监听
				// 注意不要这么判断 (val !== oldval)  因为很多时候新老值对比是一样的
				let newst = JSON.stringify(val);
				if (newst != this.copyNav) {
					this.copyNav = newst;
					this.addHistoryCache(val);
				} else {
					return;
				}
			}
		},
		/**
		 * 新增一条历史纪录
		 * @param
		 */
		addHistoryCache(val) {
			// if (this.currentHistoryIndex + 1 < this.historyCache.length) {
			//     this.historyCache.splice(this.currentHistoryIndex + 1);
			// }
			this.historyCache.push({
				nav: this.deepClone(val)
			});
			// 限制undo 纪录步数，最多支持50步操作undo
			this.historyCache.splice(50);
			this.currentHistoryIndex++;
		},
		editorUndo() {
			if (!this.canUndo) {
				return;
			}
			this.currentHistoryIndex--;
			this.relapceEditorState();
		},
		editorRedo() {
			if (!this.canRedo) {
				return;
			}
			this.currentHistoryIndex++;
			this.relapceEditorState();
		},
		/**
		 * 更新编辑器项目数据，从history中拿数据替换
		 * @param data
		 */
		relapceEditorState() {
			const prevState = this.historyCache[this.currentHistoryIndex];
			// this.compsList = this.deepClone(prevState.nav);
			this.$store.commit('setHistroyData', prevState.nav);
			// 版本回退,本地保存一个,方便后面对比
			this.copyNav = JSON.stringify(prevState.nav);
		}
	}
};
